<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素样式操作 针对css样式的属性和属性值
		 css()      功能：添加任何样式表下的属性属性值
		            1个参:获取匹配集合元素中第一个元素的css属性值
					2个参:设置匹配集合元素当中所有元素
					n个参:多层设置匹配集合元素中所有元素的属性和属性值
					语法糖：css("属性"："属性值" ，"属性"："属性值")
					.btn{
						border:1px solid red;
					}
		 height()和width() 功能：匹配集合元素中第一个元素的高度和宽度值
		                   无参：获取匹配集合元素中第一个元素的高度和宽度值
						   有参：设置匹配集合元素中第一个元素的高度和宽度
		 outHeight()和outwidth()
		                  功能：元素的宽高度
						  无参：获取元素的宽高度  包含内边距 边框
						  有参：只允许传bool值
		 -->
		 <style>
			div.box{
				background-color: aquamarine;
				padding: 20px;
				margin: 20px;
				border: 5px solid yellow;
			}
			div#result{
				margin-top: 10px;
				font-weight: 700;
			}
			 
		 </style>
	</head>
	<body>
		<!-- .box添加样式属性：背景色 内外边距：20px  边框：5px
		 .result添加样式属性：上外边距：10px  字体加粗
		 jq框架引入
		 -->
		<!-- 显示效果div1 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度【包含：内边距加边框】</button>
		<button id="bpmBtn">获取元素高度【包含：内边距加边框+外边距】</button> 
		<!-- 显示效果提示区div2 -->
		<div id="result" class="result"></div>
		<script>
			/*点击获取背景颜色的按钮 获取背景颜色值*/
			$("#getColorBtn").click(function(){
				//jq css("属性名") 获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区域--提示：获取的颜色属性值是
				$("#result").text("获取背景颜色值是："+bgColor);
			});
			/*2.点击 设置背景颜色 按钮 设置背景颜色值*/
			$("#setColorBtn").click(function(){
				//box  添加颜色橙色
				$(".box").css("background-color","orange");
				//#result 添加文本 效果修改为橙色
			$("#result").text("效果已经更换为橙色");
			});
			/*3.点击设置多层效果 按钮 设置效果如下  背景色、倒角、盒子阴影 */
			$("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../img/xx.png)",
				"border-radius":"50%",
				"box-shadow":"5px 5px 10px #ff0",
				"height":"100px",
				"width":"100px",
				"background-size":"100%"
				});
			});
			/*4.点击 获取元素宽度  按钮 获取当前元素的宽高度*/
			$("#getWidthBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取宽度是："+w+"px");
			});
			/*5.点击 获取元素高度【..】 按钮  算高度是???*/
			$("#gbpBtn").click(function(){
				var gbp=$(".box").outerHeight();
				$("#result").text("高度为："+gbp+"px");
			});
			/*6.点击 获取元素高度【..】 按钮  传true*/
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("高度为："+bpm+"px");
			});
		</script>
	</body>
</html>